<template>
    <a-modal
        title="字典值管理"
        centered
        :width="980"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="false"
        :destroyOnClose="true"
        @cancel="visible = false"
    >
        <search-panel :showAdvanced="true" @search="onSearch" @reset="onReset">
            <template #default>
                <a-col :md="7" :sm="24">
                    <a-form-item label="字典值">
                        <a-input :maxLength="35" v-model:value="queryParam.value" allow-clear placeholder="请输入类型名称" />
                    </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                    <a-form-item label="唯一编号">
                        <a-input :maxLength="35" v-model:value="queryParam.code" allow-clear placeholder="请输入唯一编号" />
                    </a-form-item>
                </a-col>
            </template>
            <template #advanced>
                <a-col :md="9" :sm="24">
                    <a-form-item label="扩展字段一">
                        <a-input :maxLength="35" v-model:value="queryParam.exta" allow-clear placeholder="请输入扩展字段一" />
                    </a-form-item>
                </a-col>
            </template>
            <template #button>
                <a-button type="primary" @click="addDataDict()">
                    <template #icon><PlusOutlined /></template>
                    新增字典</a-button
                >
            </template>
        </search-panel>
        <!-- <a-card :bordered="false"> -->
        <!-- <a-table
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :columns="columns"
                :dataSource="loadData"
                :pagination="false"
                :loading="loading"
                :rowKey="(record) => record.id"
            > -->
        <dynamic-table
            :tableType="1"
            ref="tableRef"
            :columns="columns"
            :get-list-func="sysDictDataPage"
            :initData="false"
            :rowKey="(record) => record.id"
        >
            <template #action="{ record }">
                <a @click="editDataDict(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm placement="topRight" title="确认删除？" @confirm="delDataDict(record)">
                    <a>删除</a>
                </a-popconfirm>
            </template>
        </dynamic-table>
        <!-- </a-table> -->
        <!-- </a-card> -->
    </a-modal>
</template>
<script lang="ts">
import { defineComponent, nextTick, reactive, toRefs, ref, computed, watch, onMounted, pushScopeId } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { sysDictTypeDropDown, sysDictDataPage, sysDictDataAdd, sysDictDataEdit, sysDictDataDelete } from '@/api/system/dict'
import { DynamicTable, searchPanel } from '@/components'
import { ColumnProps } from 'ant-design-vue/es/table/interface'
import { message } from 'ant-design-vue'
import { getFormSchema } from './form-schema'
import { useFormModal } from '@/hooks/useFormModal'
import { columns } from './columns'

export default defineComponent({
    name: 'dictDataForm',
    components: {
        searchPanel,
        DynamicTable
    },
    props: {},
    setup(props, ctx) {
        const tableRef = ref<any>(null)
        const state = reactive({
            queryParam: {
                value: '',
                typeId: '',
                code: '',
                exta: ''
            },
            record: [],
            confirmLoading: false,
            visible: false,
            loading: false,
            loadData: [] as any,
            rowselection: false,
            selectedRowKeys: [] as string[],
            recordEntity: []
        })
        /**
         * 查询
         */
        function onSearch() {
            nextTick(() => {
                tableRef.value.refreshTableData(state.queryParam)
            })
        }
        /**
         * 重置
         */
        function onReset() {
            state.queryParam = {
                typeId: state.queryParam.typeId,
                value: '',
                code: '',
                exta: ''
            }
            onSearch()
        }
        /* 添加字典类型 **/
        const addDataDict = () => {
            useFormModal({
                title: '新增字典',
                formSchema: getFormSchema(),
                handleOk: async (modelRef, record) => {
                    await sysDictDataAdd({...modelRef,typeId : state.queryParam.typeId}).then(() => {
                        message.success('新增成功')
                    })
                    onReset()
                }
            })
        }
        /* 编辑字典类型 **/
        const editDataDict = (record) => {
            useFormModal({
                title: '编辑字典',
                formSchema: getFormSchema(),
                fields: record,
                handleOk: async (modelRef, state) => {
                    await sysDictDataEdit(modelRef).then(() => {
                        message.success('编辑成功')
                    })
                    onReset()
                }
            })
        }

        /**
         * 删除
         * @param record
         */
        function delDataDict(record) {
            sysDictDataDelete(record).then(() => {
                message.success('删除成功')
            })
            onSearch()
        }

        return {
            ...toRefs(state),
            tableRef,
            sysDictDataPage,
            addDataDict,
            delDataDict,
            columns,
            onReset,
            onSearch,
            editDataDict
        }
    }
})
</script>
